$(function () {
  // ******* 柱形图 *****************************************************
  var chatInterval;
  function initChart(barData) {
    var bar = echarts.init(document.getElementById('bar'));
    var num = 6;
    
    // 纵坐标最大数量
    var cnts = [];
    var mianji = [];
    var towns = [];
    var maxCnt = 1;
    for (var i = 0; i < num; i++) {
      mianji.push(barData[i]["shopSum"]);
      cnts.push(barData[i]["shopCount"]);
      towns.push(barData[i]["area"]);
    }
    maxCnt = Math.max(cnts);
  
    var optionBar = {
      grid: {
        top: 50,
        bottom: '15%',
      },
      legend: {
        data: ['完成量'],
        top: 20,
        right: '5%',
        itemWidth: 18,
        itemHeight: 12,
        textStyle: {
          color: '#fff'
        }
      },
      xAxis: [{
        data: towns,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#07bffb'
          }
        },

        axisTick: {
          show: true
        },
        axisLabel: {
          interval: 0,
          rotate:60
        },
      }],
      yAxis: [ {
        type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
        axisLabel: {    // 坐标轴标签
          show: true,  // 是否显示
          // inside: true, // 标签是否朝内,默认false
          // interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
          rotate: 0, // 旋转角度
          margin: 5, // 刻度标签与轴线之间的距离
          color: '#000',  // 标签颜色默认取轴线的颜色
          fontSize: 12//标签字号
        },
        splitLine: {    // 网格线
          show: false  // 是否显示，默认为true
        },
        axisLine: {    // 坐标轴 轴线
          show: true,  // 是否显示,默认false
          lineStyle: {
            // color: '#FFFFFF',//轴线颜色
            width: 1,//轴线宽度
            type: 'solid'//轴线类型
          }
        },
      },
        {
          type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
          axisLabel: {    // 坐标轴标签
            show: true,  // 是否显示
            // inside: true, // 标签是否朝内,默认false
            // interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
            rotate: 0, // 旋转角度
            margin: 5, // 刻度标签与轴线之间的距离
            color: '#000',  // 标签颜色默认取轴线的颜色
            fontSize: 12//标签字号
          },
          splitLine: {    // 网格线
            show: false  // 是否显示，默认为true
          },
          axisLine: {    // 坐标轴 轴线
            show: true,  // 是否显示,默认false
            lineStyle: {
              // color: '#FFFFFF',//轴线颜色
              width: 1,//轴线宽度
              type: 'solid'//轴线类型
            }
          },
        }],
      series: [{
        name: '实时统计',
        type: 'bar',
        label: {
          normal: {
            show: true,
            position: 'top',
            color: '#fff'
          }
        },
        barWidth: '50%',
        barGap: 1,
        itemStyle: {
          normal: {//柱子相关设置
            color: '#F9456D'
          }
        },
        data: cnts,
      },{
        name: '实时统计',
        type: 'bar',
        label: {
          normal: {
            show: true,
            position: 'top',
            color: '#fff'
          }
        },
        barWidth: '50%',
        barGap: 1,
        itemStyle: {
          normal: {//柱子相关设置
            color: '#497EF2'
          }
        },
        data: mianji,
      }]
    }
    var option1 = {
      //提示框，默认显示
      tooltip: {
        trigger: 'axis',
        axisPointer: {// 坐标轴指示器，坐标轴触发有效
          type: 'shadow'// 默认为直线，可选为：'line' | 'shadow'
        }
      },
      //控制直角坐标系与容器上下左右的距离
      grid: {
        left: '2%',
        right: '2%',
        bottom: '15%',
        top: '14%',
        containLabel: true,//gid区域是否包含坐标轴的刻度标签。
      },
      //图例相关
      legend: {
        top:'90%',
        left:'center',
        data:['项目数量','项目面积'],//与series两个对象中的name对应
        itemGap: 15, // 图例间隔
        itemWidth: 8, //图例大小(小方块)
        itemHeight: 8, //图例大小
        orient: 'vertical',// horizontal   vertical
        icon: "rectangle", //图例的形状
        textStyle: { //图例文字的样式
          color: '#fff',
          fontSize: 12
        },
      },

      // x轴（指的是水平的那条线）相关配置
      xAxis: [
        {
          type: 'category',
          data: towns,//类目轴数据
          axisLabel: {    // 坐标轴标签
            show: true,  // 是否显示
            inside: false, // 是否朝内
            color: '#fff',
            rotate:60,
            fontSize: 12,
            interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
          },
          splitLine: {    // 网格线
            show: false  // 是否显示，默认为false
          },
          axisLine: {    // 坐标轴 轴线
            show: true,  // 是否显示
            lineStyle: {
              // color: '#FFFFFF',
              width: 1,
              type: 'solid'
            }
          },
          boundaryGap: 'true',//显示刻度，默认为 true,只是作为分隔线，标签和数据点都会在两个刻度之间的带中间
          axisTick: {//坐标轴刻度相关
            alignWithLabel: true,//类目轴中在`boundaryGap`为`true`的时候有效，可以保证刻度线和标签对齐
          },
          inverse:true,//翻转y轴数据
        }
      ],
      // y轴（垂直的那条线）设置
      yAxis: [
        {
          type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
          axisLabel: {    // 坐标轴标签
            show: true,  // 是否显示
            // inside: true, // 标签是否朝内,默认false
            // interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
            rotate: 0, // 旋转角度
            margin: 5, // 刻度标签与轴线之间的距离
            color: '#fff',  // 标签颜色默认取轴线的颜色
            fontSize: 12//标签字号
          },
          splitLine: {    // 网格线
            show: false  // 是否显示，默认为true
          },
          axisLine: {    // 坐标轴 轴线
            show: true,  // 是否显示,默认false
            lineStyle: {
              // color: '#FFFFFF',//轴线颜色
              width: 1,//轴线宽度
              type: 'solid'//轴线类型
            }
          },
        },
        {
          type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴
          axisLabel: {    // 坐标轴标签
            show: true,  // 是否显示
            // inside: true, // 标签是否朝内,默认false
            // interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
            rotate: 0, // 旋转角度
            margin: 5, // 刻度标签与轴线之间的距离
            color: '#fff',  // 标签颜色默认取轴线的颜色
            fontSize: 12//标签字号
          },
          splitLine: {    // 网格线
            show: false  // 是否显示，默认为true
          },
          axisLine: {    // 坐标轴 轴线
            show: true,  // 是否显示,默认false
            lineStyle: {
              // color: '#FFFFFF',//轴线颜色
              width: 1,//轴线宽度
              type: 'solid'//轴线类型
            }
          },
        }
      ],
      series: [
        {
          name: '个数',
          type: 'bar',//表明柱状体，饼图是pie，折线图是line
          barWidth: 14,//柱子宽度
          data: cnts,//值数据，与类型数据一一对应
          yAxisIndex: 0,//数据的刻度对应左边
          itemStyle: {
            // emphasis: {
            //     barBorderRadius: 7,
            // },
            normal: {//柱子相关设置
              // barBorderRadius: [7,7,0,0],//设置柱子圆角;左上-右上-右下-左下
              color: '#17fdf7'
            },
          }
        },
        {
          name: '面积',
          type: 'bar',//表明柱状体，饼图是pie，折线图是line
          barWidth: 14,//柱子宽度
          data: mianji,//值数据，与类型数据一一对应
          yAxisIndex: 1,//数据的刻度对应右边
          itemStyle: {
            // emphasis: {
            //     barBorderRadius: 7,
            // },
            normal: {//柱子相关设置
              color: '#497EF2'
            },
          }
        }
      ],
    };


    bar.setOption(option1);
  
    chatInterval = setInterval(function () {
      // 循环展示数据
      if (num < barData.length - 1) {
        num++;
        /*optionBar.series[0].data.shift();
        optionBar.series[0].data.push(barData[num]["shopSum"]);
       */ optionBar.series[0].data.shift();
        optionBar.series[0].data.push(barData[num]["shopCount"]);
        optionBar.xAxis[0].data.shift();
        optionBar.xAxis[0].data.push(barData[num]["area"]);

        bar.setOption(option1);
      } else {
        num = -1;
      }
    }, 5000);
  }

  // 将完成数灌入数组
  function getAreaShopInfo() {
    $.ajax({
      url: 'https://jianliapi.jiashengqizhi.com/m.api',
      type: 'post',
      data: {
        _gp: 'admin.front',
        _mt: 'areaShopListFront'
      },
      contentType: 'application/x-www-form-urlencoded', // 传参格式（默认为表单） json为application/json
      dataType: 'json',
      success: function (res) {
        // console.log('getAreaShopInfo===>res', res, '-------------');
        initChart(res.data);
      },
      error: function (err) {
        console.log('err', err);
      }
    })
  }

  //***********获取首页总体介绍相关数据****************************
  function getShopInfo() {
    $.ajax({
      url: 'https://jianliapi.jiashengqizhi.com/m.api',
      type: 'post',
      data: {
        _gp: 'admin.merchant',
        _mt: 'getMerchant'
      },
      contentType: 'application/x-www-form-urlencoded', // 传参格式（默认为表单） json为application/json
      dataType: 'json',
      success: function (res) {
        $("#getShopInfo").append('<li><div class="left">睢宁县耕地面积</div><div class="right"><b>' + res.data.gengdimianji + '</b><p>万亩</p></div></li>'
          + '<li><div class="left">已建成上图入库高标准农田面积</div><div class="right"><b>' + res.data.rukumianji + '</b><p>万亩</p></div></li>'
          + '<li><div class="left">我县划定永久基本农田</div><div class="right"><b>' + res.data.guihuamianji + '</b><p>万亩</p></div></li>'
          + '<li><div class="left">其中已建成高标准农田</div><div class="right"><b>' + res.data.wanchengmianji + '</b><p>万亩</p></div></li>');

      },
      error: function (err) {
        console.log('err', err);
      }
    })
  }

  //***********获取项目列表数据****************************
  function getShopList() {
    $.ajax({
      url: 'https://jianliapi.jiashengqizhi.com/m.api',
      type: 'post',
      data: {
        _gp: 'admin.front',
        _mt: 'shopListFront'
      },
      contentType: 'application/x-www-form-urlencoded', // 传参格式（默认为表单） json为application/json
      dataType: 'json',
      success: function (res) {
        var list = res.data.items;
        for (var i = 0; i < list.length && i < 2; i++) {
          $("#getShopList").append(
            ' <li class="active"><div class="book-rank clearfix">' +
            '<span class="ranking fl">' + list[i].shopQrcode + '</span>' +
            '<span class="name fl">' + list[i].shopName + '</span>' +
            '<span class="company fl">' + list[i].area + '</span>' +
            '<span class="hot fl">' + list[i].pianarea + '</span>' +
            '<span class="hot fl">' + list[i].biaoduan + '</span>' +
            '</div></li>')
        }
        $("#gongchengTitle span").html('今日打卡' + list.length + '人');
      },
      error: function (err) {
        console.log('err', err);
      }
    })
  }

  //***********获取工程打卡数据****************************
  function getGongchengList() {
    $.ajax({
      url: 'https://jianliapi.jiashengqizhi.com/m.api',
      type: 'post',
      data: {
        _gp: 'admin.front',
        _mt: 'logListFront',
        type: 1,
        page: 1,
        limit: 10
      },
      contentType: 'application/x-www-form-urlencoded', // 传参格式（默认为表单） json为application/json
      dataType: 'json',
      success: function (res) {
        var list = res.data.items;
        for (let i = 0; i < list.length; i++) {
          var formattedTime = new Date(list[i].gmt_day).toLocaleTimeString('en-US', { hour12: false });
          $("#getGongchengList").append(
            '<li><div class="book-rank clearfix">' +
            '<span class="ranking fl">' + list[i].realName + '</span>' +
            '<span class="name fl">' + list[i].shopName + '</span>' +
            '<span class="company fl">' + list[i].area + '</span>' +
            '<span class="hot fl">' + formattedTime + '</span>' +
            '</div></li>')
        }
      },
      error: function (err) {
        console.log('err', err);
      }
    })
  }

  //***********获取监理打卡数据****************************
  function getJianliList() {
    $.ajax({
      url: 'https://jianliapi.jiashengqizhi.com/m.api',
      type: 'post',
      data: {
        _gp: 'admin.front',
        _mt: 'dakaListFront',
        page: 1,
        limit: 10
      },
      contentType: 'application/x-www-form-urlencoded', // 传参格式（默认为表单） json为application/json
      dataType: 'json',
      success: function (res) {
        var list = res.data.items;
        for (let i = 0; i < list.length; i++) {
          let formattedTime = new Date(list[i].gmtCreate).toLocaleTimeString('en-US', { hour12: false });
          $("#getJianliList").append(
            '<li><div class="book-rank clearfix">' +
            '<span class="ranking fl">' + list[i].dakaName + '</span>' +
            '<span class="name fl">' + list[i].shopName + '</span>' +
            '<span class="company fl">' + list[i].companyName + '</span>' +
            // '<span class="hot fl"><span class="sign">已打卡</span></span>' +
            '<span class="hot fl">' + formattedTime + '</span>' +
            '</div></li>')
        }
        $("#jianliTitle span").html('今日打卡' + list.length + '人');
      },
      error: function (err) {
        console.log('err', err);
      }
    })
  }

  // ********* 工程日志+监理日志 **************************************
  // 设置滚动速度和间隔时间
  var projectScrollSpeed = 1000; // 滚动速度，单位为像素/毫秒
  var projectIntervalTime = 10000; // 间隔时间，单位为毫秒
  var projectMax = 5;

  var issueScrollSpeed = 1000;
  var issueIntervalTime = 5000;
  var issueMax = 5;

  var signScrollSpeed = 1000;
  var signIntervalTime = 5000;
  var signMax = 5;

  // 开始滚动列表的函数
  var projectScrollInterval = setInterval(function () {
    var itemCount = $('#getShopList li').length;
    if (itemCount <= projectMax) {
      clearInterval(projectScrollInterval);
      return;
    } else {
      var itemHeight = $('#getShopList li:first').outerHeight();
      $('#getShopList').animate({ marginTop: -itemHeight }, projectScrollSpeed, function () {
        $(this).append($('#getShopList li:first').detach());
        $(this).css('margin-top', 0);
      });
    }
  }, projectIntervalTime);

  // 工程日志滚动
  var issueScrollInterval = setInterval(function () {
    var itemCount = $('#getGongchengList li').length;
    if (itemCount <= issueMax) {
      clearInterval(issueScrollInterval);
      return;
    } else {
      var itemHeight = $('#getGongchengList li:first').outerHeight();
      $('#getGongchengList').animate({ marginTop: -itemHeight }, issueScrollSpeed, function () {
        $(this).append($('#getGongchengList li:first').detach());
        $(this).css('margin-top', 0);
      });
    }
  }, issueIntervalTime);

  // 监理日志滚动
  var signScrollInterval = setInterval(function () {
    var itemCount = $('#getJianliList li').length;
    if (itemCount <= signMax) {
      clearInterval(signScrollInterval);
      return;
    } else {
      var itemHeight = $('#getJianliList li:first').outerHeight();
      $('#getJianliList').animate({ marginTop: -itemHeight }, signScrollSpeed, function () {
        $(this).append($('#getJianliList li:first').detach());
        $(this).css('margin-top', 0);
      });
    }
  }, signIntervalTime);

  // ********* 页面初始化调用
  getAreaShopInfo(); // 各乡镇完成度-柱状图
  getShopInfo(); // 获取介绍及统计数据
  getShopList(); // 获取项目列表
  getGongchengList(); // 获取工程打卡数据
  getJianliList(); // 获取监理打卡数据

  // 在页面即将关闭时清理 interval
  window.onbeforeunload = function () {
    clearInterval(chatInterval);
    clearInterval(projectScrollInterval);
    clearInterval(issueScrollInterval);
    clearInterval(signScrollInterval);
    return null;
  };
});
